<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">用户相关</el-breadcrumb-item>
                <el-breadcrumb-item>代理列表</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 会员列表 -->
            <div class="userlist">
              <div class="status_box">
                <div class="status status1">
                  <el-select v-model="value1" placeholder="认证状态" @change="selectChanged1">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div class="status">
                  <el-select v-model="value2" placeholder="账号状态" @change="selectChanged2">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div class="input" @keyup.enter="findAgency()">
                  <el-input v-model="input" placeholder="代理姓名/代理id/手机号" onfocus="this.placeholder=''" onblur="this.placeholder='代理姓名/代理id/手机号'" clearable></el-input>
                </div>
                <div class="search"><el-button @click="findAgency()">搜索</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border  tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="id" label="代理ID"></el-table-column>
                  <!-- <el-table-column prop="wechatNickname" label="微信昵称"></el-table-column> -->
                  <el-table-column prop="userRealName" label="真实姓名"></el-table-column>
                  <el-table-column prop="phoneNumber" label="手机"></el-table-column>
                  <el-table-column prop="enable" label="绑定设备"></el-table-column>
                  <el-table-column prop="userLastLoginTime" :formatter="dateForma" label="最近登录时间" width="200"></el-table-column>
                  <el-table-column label="认证状态" prop="userStatus" width="150">
                    <template slot-scope='scope'>
                        <el-select v-model='scope.row.userStatus' @change="selectChanged3(scope.row)">
                          <el-option label="已认证" :value="1"></el-option>
                          <el-option label="未认证" :value="2"></el-option>
                        </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="enable" label="账号状态" align="center" width="100">
                    <template slot-scope="scope">
                      <span v-if="scope.row.enable== 1" class="userStatus1">正常</span>
                      <span v-if="scope.row.enable== 2" class="userStatus3">禁用</span>
                      <span v-if="scope.row.enable== 3" class="userStatus2">已注销</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right"  width="100">
                    <template slot-scope="scope">
                      <el-button @click="goToAgencyListDetails(scope.row)" type="text" size="small">查看</el-button>
                      <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[50,100,150,200,250]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'AgencyList',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        // 认证状态
        options1: [{
          value: '1',
          label: '已认证',
        },{
          value: '2',
          label: '未认证',
        }],
        value1: '',// 认证状态
        //账号状态
        options2: [{
          value: '1',
          label: '正常',
        },{
          value: '3',
          label: '已注销',
        },{
          value: '2',
          label: '禁用',
        }],
        value2: '',//账号状态
        input: '',// 搜索输入框
        tableData: [],// 会员表格
        multipleSelection: [], // 选择后的列表
      }
    },
    mounted() {
      this.findAgency();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      //代理列表
      findAgency(){
        console.log("查找的内容1："+this.value1);
        console.log("查找的内容2："+this.value2);
        console.log("查找的内容3："+this.input);
        this.$axios.post(this.baseURL+'user',{
          "userStatus":this.value1,
          "enable":this.value2,
          "key": this.input,
          "role":2,//2为代理 1为会员
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC"
        }).then((res)=>{
          console.log(res,"查找代理");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 根据认证状态显示列表
      selectChanged1(){
        console.log("认证状态："+this.value1);
        this.input = "";//修改认证状态时清空输入框
        this.findAgency();
      },
      // 根据账号状态显示列表
      selectChanged2(){
        console.log("账号状态："+this.value2);
        this.input = "";//修改账号状态时清空输入框
        this.findAgency();
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 查看表格该列详情
      goToAgencyListDetails(row) {
        //console.log(row.id);
        var data = row;
        this.$router.push({
          path: '/AgencyListDetails',
          query: {
            data: data,
          }
        })
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findAgency();
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findAgency();
      },
      // 修改状态
      selectChanged3(row){
        console.log(row.userStatus);
        this.$axios.post(this.baseURL+'user/updateUserInfo',{
          "id": row.id,
          "userStatus": row.userStatus,
          "requestSource":"PC",
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '修改状态成功'
            });
            setTimeout(()=>{
              this.findAgency();
            },1000)
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //删除该代理
      del(row){
        console.log(row)
        this.$confirm('确认删除该代理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL+'user/updateUserInfo',{
            "id": row.id,
            "role":1,//2为代理 1为会员
            "requestSource":"PC",
          }).then((res)=>{
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '删除代理成功'
              });
              setTimeout(()=>{
                this.findAgency();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userStatus1 {
    color: #19be6b;
  }
  .userStatus2 {
    color: #eb194d;
  }
  .userStatus3 {
    color: red;
  }
</style>
